<template>
  <div>
    <el-divider content-position="center">经销商订单记录</el-divider>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="region"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="region"
          label="地区"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="150">
      </el-table-column>
      <el-table-column label="营业执照" width="150">
        <template slot-scope="{row}">
          <el-image
              style="width: 50px; height: 50px"
              :src="row.img"
              fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号"
          width="280">
      </el-table-column>
      <el-table-column
          prop="status"
          label="账号状态">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === '正常' ? 'success' : 'danger'"
              disable-transitions>{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="showAgencyDetail(scope.$index, scope.row)">查看订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
        title="经销商订单"
        :visible.sync="drawer"
        direction="ltr"
        size="60%">
      <div>
        <el-table
            :data="tableAgencyData"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column
              prop="date"
              label="日期"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="oid"
              label="订单编号"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="aname"
              label="用户"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              label="合同">
            <template slot-scope="scope">
              <a target="_blank" :href="scope.row.csrc">{{ scope.row.cname }}</a>
            </template>
          </el-table-column>
          <el-table-column
              prop="ostatus"
              label="订单状态"
              width="180">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.ostatus === '0' ? 'danger' : 'success'"
                  disable-transitions>{{ scope.row.ostatus === '0' ? '未支付' : '已支付' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="查看详情" placement="top-start">
                <el-button @click="showOrderDetail(scope.row)" icon="el-icon-search" type="success" circle></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-drawer
            title="订单内容详情"
            :append-to-body="true"
            direction="ltr"
            :visible.sync="innerDrawer"
            size="54%">
          <el-table :data="gridData">
            <el-table-column property="date" label="日期" width="150"></el-table-column>
            <el-table-column property="fname" label="产品名称" width="200"></el-table-column>
            <el-table-column property="snum" label="购买数量"></el-table-column>
            <el-table-column property="fprice" label="单价/元"></el-table-column>
            <el-table-column
                prop="address"
                label="图片">
              <template slot-scope="{row}">
                <el-image
                    style="width: 50px; height: 50px"
                    :src="row.fimg"
                    fit="fill"></el-image>
              </template>
            </el-table-column>
          </el-table>
          <div style="font-size: x-large;text-align: right;margin-top: 20px;margin-right: 40px">
            <span>总金额:</span>
            <div class="order-price" style="color: red;">
              {{totalPrice}} ￥
            </div>
          </div>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "OrderListRecord",
  data(){
    return{
      tableData: [],
      drawer: false,
      innerDrawer: false,
      tableAgencyData:[],
      gridData:[],
      totalPrice:0
    }
  },
  methods:{
    showAgencyDetail(index,row){
      this.drawer = !this.drawer
      axios({
        method:'get',
        url:`http://localhost:8081/order/getOrderListByUser/${row.id}`
      }).then(res=>{
        console.log(res)
        this.tableAgencyData = res.data.data
      }).catch(err=>{
        console.log(err)
      })
    },
    showOrderDetail(row){
      this.innerDrawer = !this.innerDrawer
      axios({
        url: `http://localhost:8081/order/getOrderDetail/${row.oid}`,
        method: 'get'
      }).then(res => {
        console.log(res)
        this.gridData = res.data.data
        this.totalPrice = 0
        this.gridData.forEach(list => {
          this.totalPrice = this.totalPrice + (parseFloat(list.fprice) * parseFloat(list.snum))
        })
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/boss/getOrderAgencyList'
    }).then(res=>{
      console.log(res)
      this.tableData = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
